<template>
  <div>
    <el-card style="margin: 20px">
      <!-- 头部 -->
      <el-row type="flex" justify="space-between">
        <el-button
          type="primary"
          size="mini"
          @click="addClassilfy"
        >添加分类</el-button>
        <div class="input">
          <el-input v-model.trim="SearchDate" />
          <el-button @click="SearchFn"><i class="el-icon-search" /></el-button>
        </div>
      </el-row>
      <el-divider />
      <!-- 表格 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column label="图片">
          <template v-slot="{ row }">
            <img v-imgErr="require('@/assets/common/OIP-C.jpg')" :src="row.image" alt="" class="img">
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" />
        <el-table-column prop="desc" label="介绍" />
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button type="primary" @click="editFn(row.id)">编辑</el-button>
            <el-button type="danger" @click="delFn(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-row type="flex" justify="center" style="margin-top: 20px">
        <el-pagination
          :current-page.sync="pager"
          :page-size="2"
          layout="prev, pager, next"
          :total="total"
          @current-change="currentChange"
        />
      </el-row>
    </el-card>
    <addClassify ref="addClassify" :show-dialog.sync="showDialog" @xrym="reXrym" />
  </div>
</template>

<script>
import addClassify from '@/views/categories/components/addClassify.vue'
import { getList, getQuantity, delQuantity, lookQuantity } from '@/api/categoties'
export default {
  components: { addClassify },
  data() {
    return {
      List: {
        _limit: '2',
        _start: '0',
        title_contains: ''
      },
      tableData: [],
      total: 0,
      showDialog: false,
      SearchDate: '',
      pager: 1
    }
  },
  async created() {
    this.xrym()
    const quantity = await getQuantity({ title_contains: '' })
    this.total = quantity.data
    // console.log(quantity)测试
  },
  methods: {
    // 渲染页面
    async xrym(val = '') {
      const res = await getList({
        _limit: this.List._limit,
        _start: this.List._start,
        title_contains: val
      })
      this.tableData = res.data
      // console.log(res)
    },
    // 翻页渲染
    currentChange(val) {
      if (this.SearchDate) {
        this.List = {
          _limit: '2',
          _start: `${(val - 1) * 2}`,
          title_contains: this.SearchDate
        }
        this.reXrym(this.SearchDate)
      } else {
        this.List = {
          _limit: '2',
          _start: `${(val - 1) * 2}`,
          title_contains: ''
        }
        this.reXrym()
      }
    },
    // 显示弹窗
    addClassilfy() {
      this.showDialog = true
    },
    async reXrym(val = '') {
      this.xrym(val)
      const quantity = await getQuantity({ title_contains: val })
      this.total = quantity.data
    },
    // 删除分类
    delFn(id) {
      // console.log(id)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          if (this.tableData.length === 1) {
            this.List._start -= 2
          }
          await delQuantity(id)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.reXrym()
        })
        .catch(() => {

        })
    },
    // 编辑功能
    async editFn(id) {
      this.showDialog = true
      const res = await lookQuantity(id)
      this.$refs.addClassify.form = await res.data
      await this.$refs.addClassify.EchoImg()
    },
    // 搜索功能
    async SearchFn() {
      this.pager = 1
      this.reXrym(this.SearchDate)
      this.currentChange(1)
    }
  }
}
</script>

<style scoped lang='scss'>
.input {
  display: flex;
  width: 50%;
}
.img {
  width: 200px;
  height: 200px;
}
</style>
